<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>提现申请</title>
	</head>
	<link rel="stylesheet" type="text/css" href="../../../bangnuo/admin/layui/css/layui.css">
	<script src="../../../bangnuo/admin/js/jquery-1.8.0.min.js"></script>
	<body style="background: #EEEEEE;">
		<div>
			<table border="0">
				<tr>
					<th>
						<p style="color: #007DDB; font-size: 20px; font-weight: bold; float: left;">提现申请</p>
						<p style="float: left; color: red; padding: 5px;">如果您需要开发票，请提前准备好发票快递单以便能快速提现</p>
					</th>
					<th>
						<button class="layui-btn" onclick="zhixiang()" style="margin-left: 1000px; margin-right: -1000px; margin-top: 5px; margin-bottom: -5px;">开票注意事项</button>
					</th>
				</tr>
			</table>
			<hr class="layui-bg-blue" />
			<div>
				<div class="layui-card" style="margin: 10px; ">
					<div class="layui-card-body">
						<p style="font-weight: bold;">开票信息邮寄地址有更新请知悉, 新地址: &ensp;&ensp; <a id="address">浙江省杭州经济技术开发区新加坡科技园16幢704</a></p>
					</div>
				</div>
				<div class="layui-card" style="margin: 10px;">
					<div class="layui-card-body">
						<p style="font-weight: bold;">当前可提现金额：<a id="money">88.88</a>元</p>
					</div>
				</div>
				<div class="layui-card" style="margin: 10px;">
					<div class="layui-card-body">
						<p style="font-weight: bold;">备注：&ensp;&ensp;<a id="desc"></a></p>
					</div>
				</div>
			</div>
			<form class="layui-form" action="">
				<div class="layui-form-item">
					<label class="layui-form-label">是否开票</label>
					<div class="layui-input-block">
						<input type="radio" name="isInvoice" value="0" title="不开票" lay-filter="issue-mode" checked>
						<input type="radio" name="isInvoice" value="1" title="开票" lay-filter="issue-mode">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">收款人</label>
					<div class="layui-input-block">
						<div style="float: left; margin-left: 10px;">
							<input type="text" name="payee" required lay-verify="required" placeholder="收款方名称" autocomplete="off" class="layui-input"
							 style="width: 300px;">
						</div>
						<div style="float: left; margin-left: 10px;">
							<input type="text" name="phone" required lay-verify="required" placeholder="收款人电话" autocomplete="off" class="layui-input"
							 style="width: 300px;">
						</div>
						<div style="float: left; margin-left: 10px; margin-top: 7px; color: #007DDB;">填写收款人信息</div>
					</div>
				</div>
				<div style="display: none;" class="mode1">
					<div class="layui-form-item">
						<label class="layui-form-label">快递单号</label>
						<div class="layui-input-block">
							<div style="float: left;">
								<input type="text" name="invoiceNumber" required  placeholder="请输入发票快递单号" autocomplete="off" class="layui-input"
								 style="width: 300px; margin-left: 10px;">
							</div>
							<div style="float: left; color: #007DDB; margin-left: 10px; margin-top: 6px;">
								发票寄送的快递单号
							</div>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">上传发票</label>
						<div class="layui-input-block">
							<div style="float: left;">
								<button type="button" class="layui-btn" id="test1" style="margin-left: 10px;">
									<i class="layui-icon">&#xe67c;</i>上传图片
								</button>
							</div>
							<div style="float: left; color: #007DDB; margin-left: 10px; margin-top: 6px;">
								请上传发票照片, 确保照片清晰
								<div id="img"></div>
							</div>
						</div>
					</div>
				</div>
				<!-- 发票图片 -->
				<div>


					<!-- 收款方式 -->
					<div class="layui-form-item">
						<label class="layui-form-label">收款方式</label>
						<div class="layui-input-block">
							<input type="radio" name="paymentTerm" value="0" title="银行卡" lay-filter="collection-mode" checked>
							<input type="radio" name="paymentTerm" value="1" title="支付宝" lay-filter="collection-mode">
						</div>
					</div>
					<!-- 银行卡 -->
					<div class="mode2">
						<label class="layui-form-label">银行卡银行</label>
						<div class="layui-input-block">
							<div style="float: left; margin-left: 10px;">
								<input type="text" name="bankName" required  placeholder="银行卡银行" autocomplete="off" class="layui-input"
								 style="width: 300px;">
							</div>
							<div style="float: left; margin-left: 10px;">
								<input type="text" name="bankAddress" required  placeholder="银行地址" autocomplete="off" class="layui-input"
								 style="width: 300px;">
							</div>
							<div style="float: left; margin-left: 10px; margin-top: 7px; color: #007DDB;">打款账号请认真填写</div>
						</div>

						<br />
						<!-- 打款账号 -->
						<div class="mode2">
							<div class="layui-form-item">
								<label class="layui-form-label">收款账号</label>
								<div class="layui-input-block">
									<div style="float: left;">
										<input type="text" name="cardNumber" required  placeholder="请输入收款账号" autocomplete="off" class="layui-input"
										 style="width: 300px; margin-left: 10px;">
									</div>
									<div style="float: left; color: #007DDB; margin-left: 10px; margin-top: 6px;">
										请务必认真填写
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 支付宝 -->
					<div style="margin-bottom: 10px; display: none;" class="mode3">
						<label class="layui-form-label">支付宝账号</label>
						<div class="layui-input-block">
							<div style="float: left; margin-left: 10px;">
								<input type="text" name="alipayNumber" required  placeholder="支付宝名称" autocomplete="off" class="layui-input"
								 style="width: 300px;">
							</div>
							<div style="float: left; margin-left: 10px; margin-top: 7px; color: #007DDB;">打款账号请认真填写</div>
						</div>
					</div>
				</div>
				<div class="layui-btn-container" style="padding-bottom: 10px; margin-left: 110px; margin-right: -110px;">
					<button class="layui-btn" lay-submit lay-filter="formDemo" data-type="close">立即提交</button>
				</div>
			</form>

		</div>
	</body>
	<script type="text/javascript" src="../../../bangnuo/admin/layui/layui.js"></script>
	<script type="text/javascript">

	</script>
	<script>

        function getQueryVariable(variable){
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i=0;i<vars.length;i++) {
                var pair = vars[i].split("=");
                if(pair[0] == variable){return pair[1];}
            }
            return(false);
        }


        $("#money").html(getQueryVariable("sum")/100);
		var imgUrl = "";
		layui.use(['form', 'upload'], function() {
			var form = layui.form,
				upload = layui.upload;

			var uploadInst = upload.render({
				elem: '#test1', //绑定元素
				url: '/upload/img', //上传接口
				done: function(res) {
					//上传完毕回调
					if(res.success){
					    var html = '<img width="100" height="100" src="'+res.object.webPath+'">';
						$("#img").html(html);
						imgUrl = res.object.webPath;
					}
				},
				error: function() {
					//请求异常回调
				}
			});

			//监听是否开票
			layui.form.on('radio(issue-mode)', function(data) {
				//判断类型
				if (data.elem.title == "不开票") {
					//不开票
					$(".mode1").hide();
				} else if (data.elem.title == "开票") {
					//开票
					$(".mode1").show();
				}
				return false;
			});

			//监听收款方方式
			layui.form.on('radio(collection-mode)', function(data) {
				//判断类型
				if (data.elem.title == "银行卡") {
					//银行卡
					$(".mode3").hide();
					$(".mode2").show();
				} else if (data.elem.title == "支付宝") {
					//支付宝
					$(".mode2").hide();
					$(".mode3").show();
				}
				return false;
			});

			//监听提交
			form.on('submit(formDemo)', function(data) {
                data.field.invoiceUrl = imgUrl;
                data.field.orderTotalMonthId = getQueryVariable("orderTotalMonthId");
                data.field.totalCommission = getQueryVariable("sum");
				var form = data.field;
				console.log("data.field:",data.field)
                $.ajax({
                    type: "POST",
                    url: '/withdrawal/add',
                    dataType:"json",
                    contentType: "application/json;charset=UTF-8",
					data:JSON.stringify(form),
                    success: function(res){
						if(res.success){
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            console.log("index值", index)
                            close();
						}
                    }
                });

				return false;
			});
		});

		function zhixiang() {
			layer.open({
				type: 2,
				anim: 0,
				move: false,
				title: '开票注意事项',
				content: 'warning.html',
				area: ["600px", "400px"],
				offset: ["150px", "700px"]
			});
		}
	</script>
</html>
